<template>
	<!--基地详情-->
	<div class="NewsDetails">
		<div class="banner">
			<!--<img src="../../images/home/banner.png" />-->
			<div class="location">
				<div class="location-text fl">
					<img class="location-img fl" src="../../images/home/zhanshi.png" />
					<p class="fr">基地展示</p>
				</div>
				<img class="biaotibg fl" src="../../images/home/biaotibg.png" />
				<p class="navigation">
					<span class="go-back">
						<router-link :to="{path:'/index',query:{fatherIndex:fatherIndex}}">
							首页
						</router-link>
					</span>
					<span class="go-back">
						<router-link :to="{path:'/baseShow',query:{fatherIndex:fatherIndex}}">
							/基地展示
						</router-link>
					</span>

				</p>
			</div>
		</div>
		<div class="NewsInform-list">
			<div class="List-box">
				<ul>
					<li>
						<div class="NewsInform-img">
							<img :src="thatUrl + base.picture" />
						</div>
						<div class="NewsInform-text">
							<p class="worktext">{{base.name}}</p>
							<div class="navDynamic">{{base.introduction}}
							</div>
							<!--<div class="BaseShow-btn">
								<input class="btn" type="button" value="申请入驻" />
							</div>-->
						</div>
					</li>
				</ul>
				<div class="Choose-card">
					<div class="tab-tit">
						<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">基本信息</a>
						<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">基地建设情况</a>
						<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">合作专家团队</a>
					</div>
					<div class="tab-con">
						<div v-show="curId===0" class="base-information">
							<p><label>基地名称：</label><span>{{base.name}}</span></p>
							<p><label>基地类别：</label><span>{{types}}</span></p>
							<p><label>基地联系人：</label><span>{{base.contact}}</span></p>
							<p><label>申请单位：</label><span>{{base.unit}}</span></p>
							<p><label>基地地址：</label><span>{{base.address}}</span></p>
						</div>
						<div v-show="curId===1">
							<div v-if="!logisticsList.length">暂无数据！</div>
							<ul class="track-list" v-if="logisticsList.length">
								<li class="fr" v-for="item in logisticsList">
									<div class="Course-box">
										<p><img src="../../images/Course/2.png" /><span>开始时间：{{formatData(item.startTime)}}</span></p>
										<p><img src="../../images/Course/1.png" /><span>截止时间：{{formatData(item.endTime)}}</span></p>
										<p class="construction-matters">
											<img src="../../images/Course/q.png" />
											<span :title="item.constructionMatters">建设事项：<span class="show-twoline">{{item.constructionMatters}}</span></span></p>
									</div>
								</li>

							</ul>
						</div>
						<div class="Cooperative" v-show="curId===2">
							<div class="Cooperative-expert-box">
								<div v-if="cooperativeExpertList == null || cooperativeExpertList.length == 0 ">暂无数据！</div>
								<div class="Cooperative-expert" v-for="cooperativeExpert in cooperativeExpertList">
									<div class="Cooperative-img">
                    <template v-if="cooperativeExpert.headPortrait == null || cooperativeExpert.headPortrait == ''">
                      <img src="/static/images/maleHead.png" v-if="cooperativeExpert.expertGender == '男'">
                      <img src="/static/images/womanHead.png" v-else>
                    </template>
                    <img :src="urls.baseUrl + cooperativeExpert.headPortrait" v-else>
									</div>
									<div class="Cooperative-nav">
										<p class="name">{{cooperativeExpert.expertName}}</p>
										<p><label>二级学科：</label><span>{{cooperativeExpert.secondLevel}}</span></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script src="./BaseDetails.js"></script>

<style scoped>
	@import "BaseDetails.css"
</style>
